<template>
    <div>
      <!-- 选项卡按钮 -->
      <div class="tab">
        <button
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{ 'active': activeTab === tab }"
          @click="activateTab(tab)"
        >
          {{ tab }}
        </button>
      </div>
  
      <!-- 选项卡内容 -->
      <div class="tab-content">
        <div v-for="(content, tab) in tabContents" :key="tab" v-show="activeTab === tab">
          {{ content }}
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        activeTab: null,
        tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
        tabContents: {
          'Tab 1': 'Content for Tab 1...',
          'Tab 2': 'Content for Tab 2...',
          'Tab 3': 'Content for Tab 3...'
        }
      };
    },
    methods: {
      activateTab(tab) {
        this.activeTab = tab;
      }
    },
    created() {
      // 默认激活第一个选项卡
      this.activeTab = this.tabs[0];
    }
  };
  </script>
  
  <style scoped>
  .tab {
    display: flex;
    justify-content: center;
  }
  
  .tab button {
    background-color: #f2f2f2;
    border: skyblue 1px solid;
    border-radius: 10px;
    padding: 8px 16px;
    cursor: pointer;
  }
  
  .tab button.active {
    background-color: skyblue;
  }
  
  .tab-content > div {
    display: none;
  }
  
  .tab-content > div.show {
    display: block;
  }
  </style>